<template>
	<view class="u-padding-20">
		<view class="shadow_con">
			<view class="t_list u-border-bottom u-flex u-row-between">
				<text style="font-size: 32rpx;">商品编号：{{detail.id}}</text>
				<text style="color:#0c838b;" v-if="detail.status==0">已上架</text>
				<text style="color:#0c838b;" v-else>已下架</text>
			</view>
			<view class="t_list u-border-bottom u-flex u-row-between">
				<text style="color:#666;">商品报价</text>
				<input type="text" disabled :value="detail.price">
			</view>
			<view class="t_list u-border-bottom u-flex u-row-between">
				<text style="color:#666;">商品类型</text>
				<input type="text" disabled :value="detail.theme">
			</view>
			<view class="t_list">
				<text style="color:#666;" class="dis_blo">商品描述</text>
				<textarea disabled :value="detail.content" placeholder="品牌型号、新旧程度、入手渠道..."  />
			</view>
			<view class="t_list">
				<text style="color:#666;" class="dis_blo u-margin-bottom-20">商品图片</text>
				<image class="u-margin-right-30" v-for="(item,index) in detail.images" :src="item" mode="aspectFill"></image>
			</view>
		</view>
		<view class="shadow_con u-margin-top-20">
			<view class="t_list u-border-bottom">
				<text style="color:#333;">{{detail.from}}</text>
			</view>
			<view class="t_list u-flex u-row-between">
				<text style="color:#666;">发布者</text>
				<view class="user_info">
					<image class="va_m" :src="detail.avatar"></image>
					<text>{{detail.username}}</text>
				</view>
			</view>
		</view>
		<button type="default" class="btn_con" v-if="detail.status==0" @click="todown(detail.id)">下架</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getLatticeDetail,
		offShell
	} from "@/service/shareService.js";
	export default {
		data () {
			return {
				id:0,
				detail:{}
			}
		},
		onLoad(options) {
			this.id=options.id
			getLatticeDetail({
				id:options.id
			}).then(this.getLatticeDetail);
		},
		methods:{
			getLatticeDetail(e){
				if(e.code==200){
					this.detail=e.result.info
				}
			},
			todown:function(id){
				uni.showModal({
					title:'确认下架该商品？',
					// content: "确认下架该商品？",
					cancelText: "考虑一下", // 取消按钮的文字  
					confirmText: "确认下架", // 确认按钮文字  
					confirmColor: '#00aa00',
					cancelColor: '#2b2b2b',
					success: (res) => {
						if (res.confirm) {
							offShell({
								id:id
							}).then(res=>{
								if(res.code==200){
									this.$refs.uToast.show({
										type: 'error',
										title: '下架成功',
										icon:false
										// message: e.msg,
									})
									setTimeout(function(){
										uni.navigateBack();
									},1000)
								}else{
									this.$refs.uToast.show({
										type: 'error',
										title: res.msg,
										icon:false
										// message: e.msg,
									})
								}
							});
						} else if (res.cancel) {
							
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	.shadow_con{
		padding:20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 15rpx #ddd;
	}
	textarea{
		width:97%;
		padding:10rpx;
		line-height: 50rpx;
		height:150rpx;
	}
	.t_list{
		padding:20rpx 0;
	}
	.t_list input{
		display: inline-block;
		width:75%;
		text-align: right;
		vertical-align: middle;
	}
	.t_list image{
		width:150rpx;
		height:150rpx;
		border-radius: 10rpx;
	}
	.topic_con{
		width:31%;
		text-align: center; 
		font-size: 24rpx;
	}
	.btn-view {
		color: #FFFFFF;
		background-color: #0c838b;
		border-radius: 30rpx;
		padding: 10rpx 15rpx;
	}
	
	.btn-view1 {
		color: #666666;
		border: #666666 1rpx solid;
		border-radius: 30rpx;
		padding: 10rpx 15rpx;
	}
	.btn_con{
		width:90%;
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		overflow: hidden;
		margin:70rpx auto 20rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff !important;
	}
	.user_info image{
		width:80rpx;
		height:80rpx;
		border-radius: 50%;
		margin-right:20rpx;
	}
</style>
